import type { Directive } from 'vue';
import pinia from '@/stores/store'; 
import * as CryptoJS from 'crypto-js';
//  import imgNoPermission from '@/assets/images/noPermission-bg.png'
export const hasPermissionDirective: Directive = {
  mounted(el, binding) {
    if(binding.value === undefined) return;
    const store = pinia.LoginData()
    const userPermissions: any = store.getPermission();
    const permission = CryptoJS.MD5(binding.value[1]).toString(CryptoJS.enc.Hex).toLowerCase();
    const type = binding.value[0] as string; // 类型 按钮 组件
    if(!userPermissions.hasOwnProperty.call(permission) && type === 'button'){
      el.style.display = 'none';
    }
    if(!userPermissions.hasOwnProperty.call(permission) && type === 'module'){
      el.style.display = 'flex';
      el.style.flexDirection = 'column'
      el.style.justifyContent = 'center';
      el.style.alignItems = 'center';
      el.innerHTML = ''
      // const img = document.createElement('img');
      // img.src = imgNoPermission
      // img.style.height = '50%'
      // img.style.maxHeight = '200px'
      // el.appendChild(img)
      const textSpan = document.createElement('div')
      textSpan.innerText = '暂无权限，请申请开通'
      textSpan.style.color = '#394D73'
      textSpan.style.fontSize = '14px'
      textSpan.style.paddingTop = '8px'
      el.appendChild(textSpan)
    }
  }
};